
<template>
  <div class="home_bbn">
    	<div class="H_nav">
  			<div class="H_left" @click="gogo"><</div>
  			<div class="H_center">百元券专区</div>
        
          <div class="H_right" @click="toggle">...</div>	 
  		</div>
  			<div class="drop-down">
          <ul>
            <li>首页</li>
            <li>分类搜索</li>
            <li>购物车</li>
            <li>我的</li>
          </ul>
    </div>
    <div><img src="http://img1.wangjiu.com/png/20161223/default/1482490775691976"></div>

	<div class="B_text">
	<div class="bb">
		<div class="B_headline">优惠券兑换通道</div>
		<div class="B_input">
			<input type="" name="" placeholder="请您输入优惠券编码" >
		</div>
		<button class="B_btn">点击兑换</button>
	</div>
		<div></div>

	<div class="H_gain" v-for="item in arr">

    <div class="H_gain_img"><img :src="item.img"></div>
    <div class="H_gain_txt">
      <div class="H_gain_top">{{item.title}}</div>
      <div class="H_dow_zon">
        <div class="H_gain_dow">￥325.<span class="xx">00</span></div>
        <div class="buy">立即购买</div>
      </div>
    </div>
  </div>

	</div>
	<div class="B_zon">
 		<div class="B_footer">
 			——活动说明——
 			</div>
 			<div class="B_pp">
			<p>活动说明：</p>
			<p>1、百元网酒优惠券使用时间：2016年12月15日-2017年5月15日（逾期作废）；</p>
			<p>2、关于优惠券：用户接收到优惠券券码，优惠券未与当前账户绑定，请进入“网酒账户——虚拟账户——优惠券”激活， 也可在下单时激活；<br>
			激活成功后，优惠券会与当前账户绑定，无法进行变更，您只能在当前账户订购时才能使用该优惠券；

			</p>
			<p>3、百元网酒优惠券为100元的优惠券，此优惠券仅限本专题露出商品使用，可购买本专题任意商品，每张仅限使用一次，单张<br>可用于购买多个商品；在支付时直接勾选优惠券，即可直接减100元，其他专题页面商品不适用，部分商品不参与满减活动；</p>
			<p>4、因促销酒款不可预估的抢购行为，网酒网有权对售罄商品进行更换和下架；</p>
			<p>5、详细活动规则，请致电网酒网客服，电话4000-519-519。</p>
 			</div>
 		
 	</div>









 <div><img src="http://m.wangjiu.com/activity/2015/images/04_414/btn-03-02.png"></div>

 	

   </div>
	

  </div>
</template>

<script>
export default {
  name: 'home_bbn',
  data () {
    return {
      msg: 'home_bbn',
      arr:[]
    }
  },
  created:function(){
  	$(".vv").css("display","none");
  	$("footer").css("display","none");
  	var that = this;
  	$.get('http://www.beautifulmelody.top/shouqi.php?uname=&pwd=&type=%E6%89%80%E6%9C%89',function(data){
  		that.arr = JSON.parse(data).data;
  	})
  },
  methods:{
  	gogo:function(){
  		window.history.back();
  	},
  	toggle:function(){
  		$(".drop-down").toggle();
  	}
  },
  destroyed:function(){
  	 $(".vv").css("display","block");
    $("footer").css("display","block");
  }
}
</script>
<style scoped>
*{
	margin: 0;padding: 0;
}
.home_bbn{
	background: #F5F5F5;
}

.H_nav{
	font-size: 0.4rem;height: 0.9rem;overflow: hidden;background: white;
}
.H_nav div{
  margin-top: 0.1rem;
}
.H_left{
  float: left;text-align: center;margin-left: 0.3rem;
}
.H_center{
  float: left;text-align: center;margin-left: 3rem;
}
.H_right{
  float: right;font-size: 0.5rem;text-align: center;line-height: 0.5rem; margin-right: 0.3rem;
}
.drop-down li{
  font-size: 0.4rem;width: 2.5rem;height: 0.8rem;border: 1px solid #ccc;text-align: center;line-height: 0.8rem;
  color: white;background: black;opacity: 0.8;
}
.home_btn{
  position: relative;
}
.drop-down{
  position: absolute;right: 0;z-index: 99;display: none;
}
img{
  width: 100%;
}
.B_text{
	width:100%; background: #F5F5F5;
}
.B_headline{
	color: red;font-size: 0.5rem;margin:0 auto;width: 5rem;
}
.B_input input{
	float: left;height: 1rem;width:6rem;margin-left: 0.8rem;
	font-size: 0.4rem;margin-top: 0.3rem;border: 1px solid #666;
}
.B_btn{
	float: left;color:white; background: #AC1C1C;font-size: 0.4rem;width:2.5rem;height: 1rem;margin-top: 0.3rem;margin-bottom: 0.5rem;
}
.H_gain_img{
  width:4.5rem;height: 4rem;
  margin-top: 0.2rem;margin-bottom: 0.4rem;float: left;
}
.H_gain_txt{
  overflow: hidden;
  float: left;width: 5rem;height: 4rem;
  font-size: 0.4rem; margin-top: 0.2rem;margin-bottom: 0.4rem;
}
.H_gain_top{
  margin-bottom: 2.1rem;height: 1.2rem;
}
.H_dow_zon{
  overflow: hidden;
}
.H_gain_dow{
  float: left; color: red
}
.xx{
  font-size: 0.35rem;
}
.buy{
  float: right;width: 2rem;border: 1px solid red;height: 0.6rem;text-align: center;line-height: 0.6rem;border-radius:0.1rem;background: red;
}
.H_gain{
	background: white;height: 4.7rem;margin-bottom: 0.8rem;margin-left: 0.3rem;margin-right: 0.1rem;
}
.bb{
	overflow: hidden;
}
.B_footer{
	width:5rem;margin:0 auto;text-align:center;
}
.B_pp{
	font-size:0.4rem;margin-left:0.4rem;margin-right:0.4rem;
}
.B_zon{
	height:12rem;background:#CECECE;
}
</style>